.map-container {
  position: relative;
  height: 100vh;
}

.controls {
  position: absolute;
  right: 20rpx;
  bottom: 200rpx;
}

.location-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.info-card {
  position: fixed;
  bottom: 10rpx;
  left: 20rpx;
  right: 20rpx;
  background: #fff;
  border-radius: 64rpx;
  padding:  0 32rpx 76rpx;
  height: 82vh;
  // width: 100%;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
  overflow: auto;
  .topClick-box{
      position: sticky;
      top: 0rpx;
      left: 0;
      width: 100%;
      background-color: #fff;
      z-index: 999;
      height: 100rpx;
      display: flex;
      align-items: center;
    .topClick{
      width: 66rpx;
      height: 10rpx;
      background-color: #D9D9D9;
      border-radius: 38rpx;
      position: absolute;
      top: 18rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .detail-title{
    font-size: 52rpx;
    font-weight: 600;
    margin-bottom: 12rpx;
  }
  .collect-box{
    position: relative;
    margin-bottom: 16rpx;
    width: 154rpx;
    // max-width: 174rpx;
    height: 92rpx;
    .collect-box-img{
      width: 154rpx;
      height: 92rpx;
    }
    .collect-info{
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 26rpx 16rpx 0;
      top: -22rpx;
      left: -2rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .collect-img{
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
      }
      .collect-num{
        color: #fff;
        font-size: 32rpx;
      }
    }
  }
  .carousel {
    width: 100%;
    height: 368rpx;
    border-radius: 56rpx;
    overflow: hidden;
  }
  
  .carousel-img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .detail-content{
    .detail-title{
      font-size: 38rpx;
      margin: 36rpx 0 24rpx;
      font-weight: normal;
    }
    .detail-text{
      font-size: 28rpx;
      color: #707070;
    }
  }
  .table-box{
    padding: 34rpx 8rpx 0;
    border-radius: 18rpx;
    background: #F2FAF8;
    box-shadow: 0 2rpx 5.7rpx 0 #0000000d;
    margin-top: 64rpx;
    .table-title{
      font-size: 32rpx;
      margin-left: 40rpx;
    }
    .table-list{
      background-color: #fff;
      border-radius: 36rpx;
      padding: 32rpx 32rpx 4rpx;
      margin-top: 32rpx;
    }
    .table-item{
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      .detail-icon{
        width: 40rpx;
        height: 40rpx;
      }
      .toright-img{
        width: 48rpx;
        height: 48rpx;
      }
      .detail-b{
        width: 4rpx;
        height: 20rpx;
        background-color: #CFEDE5;
        margin: 0 12rpx;
      }
      .detail-text{
        font-size: 28rpx;
        width: 430rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  z-index: 999;
  
  .modal-container {
    width: 100%;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    padding: 0 16rpx 68rpx;
  }
  
  .modal-option {
    background: #fff;
    padding: 30rpx 50rpx;
    text-align: center;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 26rpx;
  }
  
  .modal-option.call {
    color: #0686FF;
    font-size: 40rpx;
    margin-bottom: 12rpx;
    background: #EDEDED;
  }
  
  .icon {
    width: 52rpx;
    height: 52rpx;
    margin-right: 32rpx;
    margin-bottom: -4rpx;
  }
  
  .phone-text {
    color: #0686FF;
    font-size: 40rpx;
  }
  
  .cancel-text {
    color: #007aff;
    font-size: 40rpx;
  }
}

/* 遮罩层 */
.modal-mask2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 弹框内容 */
  .modal-content {
    width: 620rpx;
    background: #fff;
    border-radius: 36rpx;
    padding: 44rpx;
    text-align: center;
    position: relative;
  }
  
  /* 图标 */
  .modal-icon {
    width: 260rpx;
    height: 184rpx;
    margin-top: -126rpx;
  }
  
  /* 标题 */
  .modal-title {
    // margin-top: 20rpx;
    font-size: 48rpx;
    margin-bottom: 48rpx;
  }
  
  /* 提示内容 */
  .modal-message {
    font-size: 36rpx;
    color: #A2A2A2;
    margin-bottom: 72rpx;
  }
  
  /* 按钮组 */
  .modal-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  /* 单个按钮 */
  .modal-btn {
    width: 45%;
    padding: 20rpx 0;
    border-radius: 32rpx;
    text-align: center;
    font-size: 40rpx;
  }
  
  /* 取消按钮样式 */
  .cancel-btn {
    background-color: #D9D9D9;
    color: #707070;
    border-radius: 32rpx;
    font-size: 40rpx;
  }
  
  /* 确认按钮样式 */
  .confirm-btn {
    background-color: #1AA37D;
    color: white;
  }
}
